<template>
	<view class="padding">
		<view class="yellowBg padding" v-show="openType!=1">
			<view class="top">

				<view>
					<div><text class="labelTitle">账户可用积分</text></div>
					<div><text class="labelNum marginTop">{{num}}</text></div>
					<div>
						<navigator url="/pages/CoinLog/CoinLog"><text class="textwhite16 marginTop">积分记录 </text>
						</navigator>
					</div>
				</view>
				<view class="left ">
					<view class="bigEmpty">

					</view>

					<view class="height100 bottom">
						<view class="whiteBoderRedBg line" @click="click(999)"> <text>充值</text></view>
					</view>

				</view>

			</view>

			<view class="whiteBg padding marginTop">
				<view><text> 已连续签到：{{signDay}}天</text></view>

				<view class="line marginTop">

					<view class="column bigEmpty bg-gray-coin paddingSmall" :class="{'bg-more-coin':todaySign==0}"
						@click="sign()">

						<view v-show="signDay<1">
							<image class="icon-normal" src="/static/unsign.png"></image>
						</view>
						<view v-show="signDay>=1">
							<image class="icon-normal" src="/static/sign.png"></image>
						</view>
						<view>2</view>

					</view>

					<view class="column marginLeft bigEmpty bg-gray-coin paddingSmall"
						:class="{'bg-more-coin':todaySign==1}" @click="sign()">

						<view v-show="signDay<2">
							<image class="icon-normal" src="/static/unsign.png"></image>
						</view>
						<view v-show="signDay>=2">
							<image class="icon-normal" src="/static/sign.png"></image>
						</view>
						<view>2</view>

					</view>

					<view class="column marginLeft bigEmpty bg-gray-coin paddingSmall"
						:class="{'bg-more-coin':todaySign==2}" @click="sign()">

						<view v-show="signDay<3">
							<image class="icon-normal" src="/static/unsign.png"></image>
						</view>
						<view v-show="signDay>=3">
							<image class="icon-normal" src="/static/sign.png"></image>
						</view>
						<view>2</view>

					</view>

					<view class="column marginLeft bigEmpty bg-gray-coin paddingSmall"
						:class="{'bg-more-coin':todaySign==3}" @click="sign()">
						<view v-show="signDay<4">
							<image class="icon-normal" src="/static/unsign.png"></image>
						</view>
						<view v-show="signDay>=4">
							<image class="icon-normal" src="/static/sign.png"></image>
						</view>

						<view>2</view>

					</view>
					<view class="column marginLeft bigEmpty bg-gray-coin paddingSmall"
						:class="{'bg-more-coin':todaySign==4}" @click="sign()">
						<view v-show="signDay<5">
							<image class="icon-normal" src="/static/unsign.png"></image>
						</view>
						<view v-show="signDay>=5">
							<image class="icon-normal" src="/static/sign.png"></image>
						</view>

						<view>2</view>

					</view>
					<view class="column marginLeft bigEmpty bg-gray-coin paddingSmall"
						:class="{'bg-more-coin':todaySign==5}" @click="sign()">
						<view v-show="signDay<6">
							<image class="icon-normal" src="/static/unsign.png"></image>
						</view>
						<view v-show="signDay>=6">
							<image class="icon-normal" src="/static/sign.png"></image>
						</view>

						<view>2</view>

					</view>
					<view class="column marginLeft bigEmpty bg-gray-coin paddingSmall"
						:class="{'bg-more-coin':todaySign==6}" @click="sign()">
						<view v-show="signDay<7">
							<image class="icon-normal" src="/static/unsign.png"></image>
						</view>
						<view v-show="signDay>=7">
							<image class="icon-normal" src="/static/sign.png"></image>
						</view>

						<view>10</view>

					</view>


				</view>
				<view class="marginTop"><text>连续签到满7天，最后一天可获得10积分</text></view>

			</view>
		</view>

		<view class="textblack18 marginLeft marginTop bold">权益卡专享</view>

		<view>
			<view class="marginTop"><text></text></view>
			<view class="itemGroup marginTop textgray14">
				<view class="item padding">
					<view>
						<image class="icon-mid-0" src="../../static/vip1.png"></image>
					</view>

					<view class="marginLeft bigEmpty">
						<view class="textblack18 bold"> <text>设辑AI体验卡</text></view>
						<view class="margin-top-0">注册即送，每天3次免费生成次数</view>
					</view>
					<view class="btn1 marginLeft">已开通</view>
					<!-- <view @click="click(2)" v-show="vip1==0" class="btn1 marginLeft">去开通</view> -->
					<!-- <view v-show="vip1==1" class="btn1 marginLeft">去创作</view> -->
				</view>

				<!-- 	<view class="item padding">
					<view>
						<image class="icon-mid-0" src="../../static/vip2.png"></image>
					</view>

					<view class="marginLeft bigEmpty">
						<view class="textblack18 bold"> <text>青铜权益卡</text></view>
						<view class="margin-top-0">600次作画次数，立省21元</view>
					</view>

					<view @click="click(1)" v-show="vip1==2" class="btn1 marginLeft">已失效</view>
					<view @click="click(1)" v-show="vip1==0" class="btn1 marginLeft">去开通</view>
					<view v-show="vip1==1" @click="click(1)" class="btn1 marginLeft">已开通</view>

				</view> -->

				<view class="item padding">
					<view>
						<image class="icon-mid-0" src="../../static/vip3.png"></image>
					</view>

					<view class="marginLeft bigEmpty">
						<view class="textblack18 bold"> <text>白银权益卡</text></view>
						<view class="margin-top-0">无限次作画次数，立省4320元</view>
					</view>

					<view @click="click(2)" v-show="vip2==2" class="btn1 marginLeft">已失效</view>
					<view @click="click(2)" v-show="vip2==0" class="btn1 marginLeft">去开通</view>
					<view v-show="vip2==1" @click="click(2)" class="btn1 marginLeft">已开通</view>

				</view>

				<view class="item padding">
					<view>
						<image class="icon-mid-0" src="../../static/vip4.png"></image>
					</view>

					<view class="marginLeft bigEmpty">
						<view class="textblack18 bold"> <text>黄金权益卡</text></view>
						<view class="margin-top-0">无限次作画次数，立省11620元</view>
					</view>

					<view @click="click(3)" v-show="vip3==2" class="btn1 marginLeft">已失效</view>
					<view @click="click(3)" v-show="vip3==0" class="btn1 marginLeft">去开通</view>
					<view v-show="vip3==1" @click="click(3)" class="btn1 marginLeft">已开通</view>

				</view>

				<view class="item padding">
					<view>
						<image class="icon-mid-0" src="../../static/vip5.png"></image>
					</view>

					<view class="marginLeft bigEmpty">
						<view class="textblack18 bold"> <text>铂金权益卡</text></view>
						<view class="margin-top-0">无限次作画次数，立省24320元</view>
					</view>

					<view @click="click(4)" v-show="vip4==2" class="btn1 marginLeft">已失效</view>
					<view @click="click(4)" v-show="vip4==0" class="btn1 marginLeft">去开通</view>
					<view v-show="vip4==1" @click="click(4)" class="btn1 marginLeft">已开通</view>

				</view>
			</view>


		</view>
		<view class="centerGroup dialogBg" v-show="showDialog">
			<view class="itemGroup1 dialog padding" style="height: 300rpx;">

				<view class="centerGroup textBlack18" style="font-weight: 900;">提示</view>

				<view class="centerGroup  marginTop">
					<view class="bigEmpty" style="text-align: center;padding-left: 20rpx;padding-right: 20rpx;">
						由于相关规范，IOS系梳(苹果手机)该功能暂不可用!</view>
				</view>

				<view class="centerGroup marginTop" style="margin-top: 60rpx;">
					<button class="ok  textwhite14" open-type="contact" @click="showDialog=false">点击咨询客服</button>
					<!-- <view class="centerGroup ok marginLeft textwhite14" @click="okDialog">点击咨询客服</view> -->
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import request from '/common/request.js';
	export default {
		data() {
			return {
				showDialog: false,
				num: 0,
				vip1: 0,
				vip2: 0,
				vip3: 0,
				vip4: 0,
				signDay: 0,
				todaySign: 0,
				openType: ""
			}
		},
		onLoad: function(query) {
			this.openType = query.openType

		},
		onReady: function() {
			this.requestX()
		},
		methods: {

			async sign() {
				const url = getApp().globalData.apiUrl + "/api/v1/user/sign";
				const that = this;
				request(url, "POST", {}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						if (res.code == 0) {
							// todaySignIn
							that.num = res.data.coin;
							that.signDay = res.data.signInDay
							if (res.data.todaySignIn == 1) {
								that.todaySign = -1;
							} else {
								that.todaySign = res.data.signInday;
							}

						} else {

						}
					}, function(err) {
						console.log('返回错误回调', err)
					})
			},

			async requestX() {
				const url = getApp().globalData.apiUrl + "/api/v1/user/mine?goto=gotoPayPage";
				const that = this;
				request(url, "GET", {}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						if (res.code == 0) {
							that.num = res.data.coin;
							that.vip1 = res.data.vip1
							that.vip2 = res.data.vip2
							that.vip3 = res.data.vip3
							that.vip4 = res.data.vip4
							// todaySignIn
							that.signDay = res.data.signInday
							if (res.data.todaySignIn == 1) {
								that.todaySign = -1;
							} else {
								that.todaySign = res.data.signInday;
							}


						} else {

						}
					}, function(err) {
						console.log('返回错误回调', err)
					})
			},
			click(num) {
				switch (num) {
					case 999:
						var res = wx.getSystemInfoSync();


						if (res.platform == 'ios') {
							this.showDialog = true;
						} else {
							uni.navigateTo({
								url: "/pages/Charge/Charge"
							})
						}

						break;

					case 0:
						uni.navigateTo({
							url: "/pages/OpenVip/OpenVip?id=0"
						})
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/newVip/newVip?id=2"
						})
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/newVip/newVip?id=2"
						})
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/newVip/newVip?id=3"
						})
						break;
					case 4:
						uni.navigateTo({
							url: "/pages/newVip/newVip?id=4"
						})
						break;
				}
			}

		}
	}
</script>

<style>
	@import "../../common/uni.css";

	.dialog {

		width: 65%;

	}

	.dialogBg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.centerGroup {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.itemGroup1 {
		border-radius: 15px;
		height: 200rpx;
		background-color: #ffffff;
	}

	.bg-gray-coin {
		border-radius: 16rpx;
		background: #F8F9FA;
	}

	.bg-more-coin {
		border-radius: 16rpx;
		background: #FFAA00 !important;
		color: #FFFFFF !important;
	}

	.whiteBoderRedBg {
		width: 160rpx;
		height: 60rpx;
		border-radius: 20px;
		background: #FF7744;
		box-sizing: border-box;
		border: 1px solid #FFFFFF;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.itemGroup {
		background: #FFFFFF;
		box-sizing: border-box;
		border: 2px solid #D8D8D8;
	}

	.item {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 14px;
		opacity: 1;

	}

	.btn1 {
		width: 100rpx;
		height: 42rpx;
		border-radius: 100rpx;
		opacity: 1;
		text-align: center;
		border: 1px solid #C4BFBF;
	}



	.whiteBg {

		left: 33 px;
		top: 100px;
		border-radius: 14px;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1px solid #DFDFDF;
	}

	.left {
		flex-grow: 1;
		display: flex;
	}

	.top {
		display: flex;
		flex-direction: row;
	}

	.yellowBg {
		border-radius: 14px;
		background-color: #FFAA00;
	}

	.labelNum {
		left: 50.43px;
		top: 191.38px;
		font-size: 72rpx;
		color: #FFFFFF;
	}

	.labelTitle {
		/* 账户可用积分 */
		left: 50.43rpx;
		top: 145.92rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>